<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	template="/template/template_dialog.xhtml">
	<ui:define name="head">
		<title>一次设备风险评估</title>
		<link rel="stylesheet"
			href="/resources/plugins/datatables/dataTables.bootstrap.css" />
		<style>
#barChart, #treepMapChart {
	margin: 0 auto;
	display: none;
}

a {
	font-size: 16px;
}

.isHidden {
	display: none;
}

#changeViewBtn {
	float: right;
	margin-right: 20px;
}

#changeViewBtn:hover {
	color: #4398ad;
}

#conclusion {
	padding-left: 20px;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	color: white;
}

.box {
	box-shadow: none;
}

ul {
	list-style: none;
}

ul li {
	height: 30px;
	line-height: 30px;
}

.riskLevel {
	font-size: 16px;
	font-weight: bold;
}

.riskFactor {
	font-size: 16px;
	padding-left: 30px;
}
#tbTitle span {
	font-size: 18px;
	font-weight: bold;
}
</style>
	</ui:define>
	<ui:define name="content">
		<div class="box no-border">
			<!-- <div class="box-header" style="font-size: 18px; display: none;"></div> -->
			<div class="box-body">
				<div class="small-box bg-yellow" id="conclusion"></div>
				<div id="chartDiv">
					<div class="box box-info row">
						<div style="height: 15px; display: none;">
							<i class="fa fa-exchange" id="changeViewBtn" title="切换视图"></i>
						</div>
						<div id="barChart"></div>
						<div id="treeMapChart" class="isHidden"></div>
						<div class="col-sm-8">
							<div id="mainPie" style="height: 400px"></div>
						</div>
						<div class="col-sm-4">
							<div id="descDiv" style="height: 400px"></div>
						</div>
					</div>
					<div class="box box-info row">
						<div class="col-sm-6">
							<div id="subPie1" style="height: 300px"></div>
						</div>
						<div class="col-sm-6">
							<div id="subPie2" style="height: 300px"></div>
						</div>
					</div>
				</div>
				<div id="detailDiv" style="display:none;">
					<div class="box box-success">
						<div class="box-header" id="tbTitle">
							<span></span>
							<a onclick="backToPie();" style="float: right; cursor: pointer;">&lt;&lt;返回</a>
						</div>
						<div class="box-body">
							<table id='detailTb'
								class='table table-bordered table-hover dataTable'>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<h:inputHidden id="stationName"
			value="#{request.getParameter('stationName')}"></h:inputHidden>
		<h:inputHidden id="stationId"
			value="#{request.getParameter('stationId')}"></h:inputHidden>
	</ui:define>
	<ui:define name="contentend">
		<script src="/resources/plugins/echarts/echarts.js"></script>
		<script src="/resources/js/mycharts/categoryBarChart.js"></script>
		<script src="#{request.contextPath}/resources/js/tables/mytable.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/datatables/jquery.dataTables.min.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="/resources/js/mycharts/treeMapChart.js"></script>
		<script src="/resources/js/mycharts/pieChart.js"></script>
		<script src="/resources/js/array-util.js"></script>
		<script src="/resources/js/common.js"></script>
		<script src="riskEvaluateDlg.js"></script>
		<script>
			var risk=null;
		   $(function(){
			   var t1 = window.setInterval(function() {
					var height = $(window.parent.document).find("#modalBody").height();
					var width = $(window).width();
					if (height != '0'&amp;&amp; width!='0') {
						/* $("#barChart").height(Number(height) - 80);
						$("#barChart").width(Number(width) - 40);
						$("#treeMapChart").height(Number(height) - 80);
						$("#treeMapChart").width(Number(width) - 40); */
						$("#mainPie").width(Number(width) *7/12-50);
						$("#subPie1").width(Number(width)/2-50);
						$("#subPie2").width(Number(width)/2-50);
			            risk=new RiskEvaluateChart();
			            risk.initPrimeData();
			            /*risk.setPrimeChartClicker(); */
						window.clearInterval(t1);
					}
				}, 20);
		   });
		   function backToPie(){
				$("#detailDiv").hide();
				$("#chartDiv").show();
				$("#conclusion").show();
			}
		</script>
	</ui:define>
</ui:composition>